<template>
  <div v-transfer-dom>
    <popup v-model="showLoading" :hide-on-blur="false">
      <div class="loading-wrapper">
        <h2>正在为您生成结果</h2>
        <div class="img-box">
          <img class="img-outer" src="~@/static/images/outer.png" alt />
          <img class="img-inner" src="~@/static/images/inner.png" alt />
          <span>数据分析中</span>
          <b>...</b>
        </div>
      </div>
    </popup>
  </div>
</template>
 <script>
import { TransferDom, Popup } from "vux";
export default {
  props: {
    showLoading: {
      type: Boolean,
      default: false
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Popup
  },
  data() {
    return {};
  }
};
</script>
 
 
 <style scoped lang="less">
.loading-wrapper {
  width: 100%;
  height: 7.5rem;
  border-top-right-radius: 0.2rem;
  border-top-left-radius: 0.2rem;
  background: #fff;
  overflow: hidden;
  h2 {
    text-align: center;
    font-size: 0.32rem;
    margin-top: 1rem;

    font-family: PingFangSC;
    font-weight: 600;
    color: #222;
  }
  .img-box {
    width: 3.8rem;
    height: 3.8rem;
    margin: 1rem auto;
    position: relative;
    span,
    b,
    img {
      position: absolute;
    }
    .img-outer {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      -webkit-animation: rotateing 1s steps(12, end) infinite;
      animation: rotateing 1s steps(12, end) infinite;
    }
    .img-inner {
      width: 3.5rem;
      height: 3.5rem;
      left: 0.15rem;
      top: 0.15rem;
    }
    span,
    b {
      text-align: center;
      font-size: 0.32rem;
      font-family: PingFangSC;
      font-weight: 600;
      color: #80d566;

      display: block;
      width: 100%;
    }
    span {
      top: 1.3rem;
    }
    b {
      top: 1.8rem;
    }
    @keyframes rotateing {
      0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
      }
      100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
      }
    }
  }
}
</style>
 